<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 500px;
        height: 30px;
        margin: 50px auto;
        overflow: hidden;
        border: 1px solid #CCCCCC;
        border-radius: 15px;
    }

    span {
        height: 30px;
        width: 0;
        display: block;
        line-height: 30px;
        background: red;
        text-indent: 250px;
        color: #000;

    }
</style>

<body>
<div id="box">
    <span id="bar"></span>
</div>
<input type="button" style="display:block;margin:0 auto" onclick="touPiao()" value="开始投票">
</body>
<script>
    //获取dom元素
    var obar = document.getElementById("bar");

    //定义一个定时器，因为后面要清除我们给它命名
    function touPiao() {

        //速度为3，匀速，也可以利用随机数函数让速度随机
        var speed = 3;
        //设置退出条件，当span的宽度大于盒子超出就清除定时器
        if (obar.offsetWidth >= 500) {
            alert("投票已满")
            return
        } else {
            //条件不满足时我们span的宽度为当前宽度加速度
            obar.style.width = speed + obar.offsetWidth + "px"
            //由于浮点数误差，这边我们乘以一百再取整。
            obar.innerHTML = parseInt(obar.offsetWidth / 500 * 100) + "%"
        }

    }

</script>
</html>